<template>
	<view>
		<u-sticky>
			<u-subsection @change="change" bgColor="#FFFFFF" buttonColor="#19be6b" active-color="#FFFFFF" :list="tabs"
				:current="current"></u-subsection>
		</u-sticky>
		<Loading v-if="page_loading" />
		<template v-else>
			<Empty v-if="order.length===0 && !page_loading" />
			<view v-for="(item,index) in order" :key="index" class="card">
				<view class="u-border-bottom default-window flex place">
					<view class="u-font-12">
						{{item.create_time}}
					</view>
					<view class="u-font-11 u-tips-color">{{tabs[current].name}}</view>
				</view>
				<navigator hover-class="none" :url="`/pages/order/detail?loadId=${item.order_id}`">
					<view style="align-items: flex-start;" class="default-window flex u-border-bottom"
						v-for="(product,tip) in item.order_product" :key="tip">
						<view class="product-image">

							<image :src="product.image" mode="aspectFit"
								style="width: 130rpx;height: 130rpx;display: block;"></image>
						</view>
						<view class="product-name">
							<view>{{product.name}}</view>
							<view class="u-font-12 u-tips-color">
								<text>{{product.sku_str}}</text>
							</view>
							<view class="flex place">
								<view class="font-red bold">
									<text>￥{{product.discount_price}}</text>
								</view>
								<view class="u-font-11">×{{product.num}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<view class="default-window flex place">
					<view></view>
					<view class="flex around">
						<u-button v-if="item.status===0" @click="cancelOrder(item.order_id)" size="mini"
							class="btn">取消订单</u-button>
						<u-button v-if="item.status===0" @click="payOrder(item.no)" size="mini" type="success"
							class="btn">立即支付</u-button>
						<u-button v-if="item.pick_type===1 && item.status===1"
							@click="checkCode(item.code,item.order_id)" size="mini" type="success"
							class="btn">查看核销码</u-button>
						<u-button v-if="item.status===2" @click="confirmOrder(item.order_id)" size="mini" type="success"
							class="btn">确认收货
						</u-button>
					</view>
				</view>
			</view>
		</template>

		<!-- <view v-if="current==0">
			<Empty v-if="orderList0.length===0 && !page_loading" />
			<view v-for="(item,index) in orderList0" :key="index" class="card">
				<view class="u-border-bottom default-window flex place">
					<view class="u-font-12">
						{{item.create_time}}
					</view>
					<view class="u-font-11 u-tips-color">待付款</view>
				</view>
				<navigator hover-class="none" :url="`/pages/order/detail?loadId=${item.order_id}`">
					<view style="align-items: flex-start;" class="default-window flex u-border-bottom"
						v-for="(product,tip) in item.order_product" :key="tip">
						<view class="product-image">

							<image :src="product.image" mode="aspectFit"
								style="width: 130rpx;height: 130rpx;display: block;"></image>
						</view>
						<view class="product-name">
							<view>{{product.name}}</view>
							<view class="u-font-12 u-tips-color">
								<text>{{product.sku_str}}</text>
							</view>
							<view class="flex place">
								<view class="font-red bold">
									<text>￥{{product.discount_price}}</text>
								</view>
								<view class="u-font-11">×{{product.num}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<view class="default-window flex place">
					<view></view>
					<view class="flex around">
						<u-button @click="cancelOrder(item.order_id)" size="mini" class="btn">取消订单</u-button>
						<u-button @click="payOrder(item.no)" size="mini" type="success" class="btn">立即支付</u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current==1">
			<Empty v-if="orderList1.length===0 && !page_loading" />
			<view v-for="(item,index) in orderList1" :key="index" class="card">
				<view class="u-border-bottom default-window flex place">
					<view class="u-font-12">
						{{item.create_time}}
					</view>
					<view class="u-font-11" style="color: #ff9900;">待发货</view>
				</view>
				<navigator hover-class="none" :url="`/pages/order/detail?loadId=${item.order_id}`">
					<view style="align-items: flex-start;" class="default-window flex"
						v-for="(product,tip) in item.order_product" :key="tip">
						<view class="product-image">
							<image :src="product.image" mode="aspectFit"
								style="width: 130rpx;height: 130rpx;display: block;"></image>
						</view>
						<view class="product-name">
							<view>{{product.name}}</view>
							<view class="u-font-12 u-tips-color">
								<text>{{product.sku_str}}</text>
							</view>
							<view class="flex place">
								<view class="font-red bold">
									<text>￥{{product.discount_price}}</text>
								</view>
								<view class="u-font-11">×{{product.num}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<view class="default-window flex place">
					<view></view>
					<view class="flex around">
						<u-button v-if="item.pick_type===1" @click="checkCode(item.code,item.order_id)" size="mini"
							type="success" class="btn">查看核销码</u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current==2">
			<Empty v-if="orderList2.length===0 && !page_loading" />
			<view v-for="(item,index) in orderList2" :key="index" class="card">
				<view class="u-border-bottom default-window flex place">
					<view class="u-font-12">
						{{item.create_time}}
					</view>
					<view class="u-font-11 font-green">待收货</view>
				</view>
				<navigator hover-class="none" :url="`/pages/order/detail?loadId=${item.order_id}`">
					<view style="align-items: flex-start;" class="default-window flex u-border-bottom"
						v-for="(product,tip) in item.order_product" :key="tip">
						<view class="product-image">
							<image :src="product.image" mode="aspectFit"
								style="width: 130rpx;height: 130rpx;display: block;"></image>
						</view>
						<view class="product-name">
							<view>{{product.name}}</view>
							<view class="u-font-12 u-tips-color">
								<text>{{product.sku_str}}</text>
							</view>
							<view class="flex place">
								<view class="font-red bold">
									<text>￥{{product.discount_price}}</text>
								</view>
								<view class="u-font-11">×{{product.num}}</view>
							</view>
						</view>
					</view>
				</navigator>
				<view class="default-window flex place">
					<view></view>
					<view class="flex around">
						<u-button @click="confirmOrder(item.order_id)" size="mini" type="success" class="btn">确认收货
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current==3">
			<Empty v-if="orderList3.length===0 && !page_loading" />
			<view v-for="(item,index) in orderList3" :key="index" class="card">
				<view class="u-border-bottom default-window flex place">
					<view class="u-font-12">
						{{item.create_time}}
					</view>
					<view class="u-font-11 u-tips-color">已完成</view>
				</view>
				<navigator hover-class="none" :url="`/pages/order/detail?loadId=${item.order_id}`">
					<view style="align-items: flex-start;" class="default-window flex"
						v-for="(product,tip) in item.order_product" :key="tip">
						<view class="product-image">
							<image :src="product.image" mode="aspectFit"
								style="width: 130rpx;height: 130rpx;display: block;"></image>
						</view>
						<view class="product-name">
							<view>{{product.name}}</view>
							<view class="u-font-12 u-tips-color">
								<text>{{product.sku_str}}</text>
							</view>
							<view class="flex place">
								<view class="font-red bold">
									<text>￥{{product.discount_price}}</text>
								</view>
								<view class="u-font-11">×{{product.num}}</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view v-if="current==4">
			<Empty v-if="orderList4.length===0 && !page_loading" />
			<view v-for="(item,index) in orderList4" :key="index" class="card">
				<view class="u-border-bottom default-window flex place">
					<view class="u-font-12">
						{{item.create_time}}
					</view>
					<view class="u-font-11 u-tips-color">
						{{item.status==8?'退款中':'其他'}}
					</view>
				</view>
				<navigator hover-class="none" :url="`/pages/order/detail?loadId=${item.order_id}`">
					<view style="align-items: flex-start;" class="default-window flex"
						v-for="(product,tip) in item.order_product" :key="tip">
						<view class="product-image">
							<image :src="product.image" mode="aspectFit"
								style="width: 130rpx;height: 130rpx;display: block;"></image>
						</view>
						<view class="product-name">
							<view>{{product.name}}</view>
							<view class="u-font-12 u-tips-color">
								<text>{{product.sku_str}}</text>
							</view>
							<view class="flex place">
								<view class="font-red bold">
									<text>￥{{product.discount_price}}</text>
								</view>
								<view class="u-font-11">×{{product.num}}</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		 -->
		<u-popup v-model="code_show" mode="bottom">
			<view class="default-window">
				<u-section title="核销码" :right="false" line-color="#19be6b">

				</u-section>
			</view>
			<view class="code-box">
				<view class="code default-window">{{code}}</view>
				<view class="padding">
					<image :src="code_url" class="image"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Loading from '../../components/loading/loading.vue'
	import Empty from '../../components/empty/empty.vue'
	export default {
		components: {
			Loading,
			Empty
		},
		data() {
			return {
				current: 0,

				order: [],

				tabs: [{
						name: '待支付',
						status: 0,
					},
					{
						name: '待发货',
						status: 1,
					},
					{
						name: '已发货',
						status: 2,
					},
					{
						name: '已完成',
						status: 3,
					},
					{
						name: '退款中',
						status: 8,
					}
				],


				payWayList: this.$store.state.product.payWay,

				code_url: '',
				code: '',
				code_show: false,

				page_loading: true,

				page: 0,
				limit: 50,
			};
		},
		onLoad(data) {
			this.current = data.type || 0;
		},
		onReady() {
			this.loadOrder();
		},
		methods: {
			checkCode(code, order_id) {

				this.$api('Order/confirm_qrcode', {
					order_id: order_id
				}).then(data => {
					if (data.status == 1) {
						this.code_url = data.data.url
						this.code = code
						this.code_show = true
					} else {
						this.$showToast(data.msg);
					}
				});

			},
			change(e) {
				// console.log(e)
				this.current = e;
				this.page = 0;
				this.page_loading = true;
				this.order.length = 0;
				this.loadOrder();

			},
			//确认收货
			confirmOrder(id) {
				this.$showModal('是否确认收货此商品？', () => {
					let params = {
						order_id: id
					};
					this.$api('Order/confirm', params).then(data => {
						if (data.status == 1) {
							this.$showToast(data.msg);
							this.loadOrder();
						} else {
							this.$showToast(data.msg);
						}
					});
				});
			},
			//支付订单
			payOrder(no) {
				this.$showModal('是否支付该笔订单？', () => {
					const that = this
					uni.showActionSheet({
						title: '请选择支付方式',
						itemList: that.payWayList.map(item => {
							return item.pay_text
						}),
						success: (res) => {
							const payType = this.payWayList[res.tapIndex].pay_type
							let params = {
								is_mini: 1,
								no: no,
								pay_type: payType,
							};
							this.$api('Pay/order', params).then(data => {
								if (data.status == 1) {
									uni.hideLoading();
									this.$pay(data.data.response).then(data => {
										uni.reLaunch({
											url: '/pages/public/success/success'
										})
									}).catch(res => {
										uni.switchTab({
											url: '/pages/usercenter/usercenter'
										})
										// this.$showToast(res.errMsg)
									})
								} else if (data.status == 2) {
									uni.hideLoading();
									this.$showToast('支付成功');
									uni.reLaunch({
										url: '/pages/public/success/success'
									})
								} else {
									this.$showToast(data.msg);
								}
							})
						}
					})
				})
			},
			loadOrder() {
				this.page = this.page + 1
				this.$api('Order/lists', {
					status: this.tabs[this.current].status,
					page: this.page,
					limit: 15,
				}).then(data => {
					if (data.status == 1) {
						let orderList = data.data.order;
						this.order.push(...orderList)

						if (this.page_loading) this.page_loading = false
					} else {
						this.$showToast(data.msg);
					}
				});
			},
			cancelOrder(id) {
				this.$showModal('是否取消该笔订单？', () => {
					let params = {
						order_id: id
					};
					this.$api('Order/cancel', params).then(data => {
						if (data.status == 1) {
							this.$showToast(data.msg);
							this.loadOrder();
						} else {
							this.$showToast(data.msg);
						}
					});
				})

			}
		}
	}
</script>

<style lang="scss">
	.code-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30rpx;

		.image {
			width: 300rpx;
			height: 300rpx;
		}

		.code {
			color: $uni-color-success;
			font-size: 40rpx;
		}
	}

	.btn {
		margin-left: 10rpx;
	}

	.product-image {
		width: 130rpx;
		height: 130rpx;
	}

	.product-name {
		padding-left: 30rpx;
		flex: 1;
	}

	.shop-head {
		width: 50rpx;
		height: 50rpx;
		display: block;
		border-radius: 50%;
	}

	.shop-name {
		padding: 0 10rpx;
		font-size: 26rpx;
	}
</style>